<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>乌龟游戏</title>
    <script type="text/javascript">
        function move(obj){
            var cock_top=200;
            var cock_left=200;
            //编程思想:不知道是什么就输出或者日志或者debug
            //编程技巧:在不确定的情况下可以输出看看
            var wugui = document.getElementById("wugui");
            var wugui_top = wugui.style.top;
            var wugui_left = wugui.style.left;
            wugui_top=parseInt(wugui_top.substring(0,wugui_top.lastIndexOf("p")));
            wugui_left=parseInt(wugui_left.substring(0,wugui_left.lastIndexOf("p")));
            // alert(wugui_top+" "+ wugui_left)
            if('向上走'==obj.value){
                wugui_top-=5;
                wugui.style.top=wugui_top+"px"
            }
            if('向左走'==obj.value){
                wugui_left-=5;
                wugui.style.left=wugui_left+"px"
            }
            if('向右走'==obj.value){
                wugui_left+=5;
                wugui.style.left=wugui_left+"px"
            }
            if('向下走'==obj.value){
                wugui_top+=5;
                wugui.style.top=wugui_top+"px"
            }

            // wugui_top=wugui.style.top;
            // wugui_left=wugui.style.left;
            var wugui_width=94;
            var wugui_height=67;
            var cock_width=76;
            var cock_height=73;
            var x=Math.abs(wugui_left-cock_left);
            var y=Math.abs(wugui_top-cock_top);
            var yy=0;
            var xx=0;
            if(wugui_top<cock_top){
                if(y<wugui_height){
                    yy=1;
                }
            }else{
                if(y<cock_height){
                    yy=1;
                }
            }

            if(wugui_left<cock_left){
                if(x<wugui_width){
                    xx=1;
                }
            }else{
                if(x<cock_width){
                    xx=1;
                }
            }
            if(xx&&yy){
                alert("乌龟真厉害")
                wugui.style.top="120px"
                wugui.style.left="100px"
            }

        }
    </script>
</head>
<body>
<table border="1">
    <tr>
        <!--
        1.this表示的是电击的button，而且已经是一个dom对象
        -->
        <td></td>
        <td><input type="button" value="向上走" onclick="move(this)"/></td>
        <td></td>
    </tr>
    <tr>
        <td><input type="button" value="向左走" onclick="move(this)"/></td>
        <td></td>
        <td><input type="button" value="向右走" onclick="move(this)"/></td>
    </tr>
    <tr>
        <td></td>
        <td><input type="button" value="向下走" onclick="move(this)"/></td>
        <td></td>
    </tr>
</table>
<!--把乌龟放在一个div-->
<!--left:100px表示图片距离原点的横坐标的距离
    top:120px表示图片距离原点的横坐标的距离-->
<div id="wugui" style="position: absolute ;left:100px;top:120px;">
    <img src="img/1.bmp" border="1" alt=""/>
</div>
<!--公鸡图片div-->
<div id="cock" style="left:200px;position:absolute;top:200px;">
    <img src="img/2.bmp" border="1" alt=""/>
</div>
</body>
</html>